<template>
	<view>
		<view class="aui-news-box">
			<view v-for="(list, i) in lists" :key="i">
				<button open-type="contact" class="aui-news-item" style="background: none;" v-if="list.tit1=='客服'">
					<view class="aui-news-item-hd">
						<image :src="list.img" class="img" />
					</view>
					<view class="aui-news-item-bd" style="display: flex;flex-direction: column;text-align: left;">
						<view style="margin-top: 20rpx;color: #666;">{{list.tit1}}</view>
					</view>
				</button>
				<button class="aui-news-item" style="background: none;" v-else>
					<view class="aui-news-item-hd">
						<image :src="list.img" class="img" />
					</view>
					<view class="aui-news-item-bd" style="display: flex;flex-direction: column;text-align: left;">
						<view style="margin-top: 20rpx;color: #666;">{{list.tit1}}</view>
						<view
							style="white-space: nowrap;  overflow: hidden;text-overflow: ellipsis;width: 100%;font-size: 28rpx;">
							{{list.tit2}}
						</view>
					</view>
				</button>
				


			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				lists: [{
						"tit1": "客服",
						// "tit2": "恭喜你参加的拼团已组成成功了，请您等待卖家发货23123",
						"time": "08:48",
						"img": '/static/icon-item-001.png'
					}
				],
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.clearfix::after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}

	.clearfix {}

	/* 必要布局样式css */
	.aui-flexView {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.aui-scrollView {
		width: 100%;
		height: 100%;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		position: relative;
		/* margin-top: -44px; */
	}

	.aui-navBar {
		height: 44px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		z-index: 1002;
		background: #ffffff;
	}

	.aui-navBar:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #ffffff;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.aui-navBar-item {
		height: 44px;
		min-width: 25%;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 25%;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		padding: 0 0.9rem;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		font-size: 0.7rem;
		white-space: nowrap;
		overflow: hidden;
		color: #a0a0a0;
		position: relative;
	}

	.aui-navBar-item:first-child {
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		-ms-flex-order: 1;
		order: 1;
		margin-right: -25%;
		font-size: 0.9rem;
		font-weight: bold;
	}

	.aui-navBar-item:last-child {
		-webkit-box-ordinal-group: 4;
		-webkit-order: 3;
		-ms-flex-order: 3;
		order: 3;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}

	.aui-center {
		-webkit-box-ordinal-group: 3;
		-webkit-order: 2;
		-ms-flex-order: 2;
		order: 2;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		height: 44px;
		width: 50%;
		margin-left: 25%;
	}

	.aui-center-title {
		text-align: center;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		text-overflow: ellipsis;
		font-size: 0.95rem;
		color: #3c3c3c;
	}

	.icon {
		width: 20px;
		height: 20px;
		display: block;
		border: none;
		float: left;
		background-size: 20px;
		background-repeat: no-repeat;
	}

	.icon-return {
		background-image: url("");
	}

	.icon-sys {
		background-image: url("");
		margin-right: 10px;
	}

	.icon-fre {
		background-image: url("");
	}

	.aui-news-box {
		margin-top: 8px;
		background: #fff;
	}

	.aui-news-item {
		padding: 10rpx 15rpx;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.aui-news-item-hd {
		margin-right: .8em;
		line-height: 55px;
		text-align: center;
		background: #fff;
		border-radius: 15px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.img {
		width: 55px;
		height: 55px;
	}

	.aui-news-item-hd img {
		width: 100%;
		max-height: 100%;
		vertical-align: top
	}

	.aui-news-item-bd {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		margin-top: -40rpx;
	}

	.aui-news-item-bd h4 {
		font-weight: 400;
		font-size: 16px;
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-wrap: normal;
		word-wrap: break-word;
		word-break: break-all;
		padding-bottom: 10px;
		color: #333;
	}

	.aui-news-item-bd p {
		color: #848689;
		font-size: 13px;
		line-height: 1.2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.aui-news-item:before {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #d8d8d8;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.aui-news-item-fr {
		text-align: right;
		font-size: 0.8rem;
		color: #8c8c8c;
		margin-top: -25px;
	}
</style>